<template>
  <div class="container">

    <div class="breadcrumb">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>活动管理</el-breadcrumb-item>
        <el-breadcrumb-item>活动列表</el-breadcrumb-item>
        <el-breadcrumb-item>活动详情</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <div class="clearfix">
      <div class="tt_h1">

              <span class="ico">
                <img src="http://img3.xcarimg.com/PicLib/logo/pl4_40.jpg">
              </span>

        <span class="lt_f1">一汽-大众-</span>
        <h1>迈腾</h1>
        <a class="ranking" target="_blank" href="http://www.xcar.com.cn/top/list-1-4-4-1-0-0-1/">中型车排名
          <span class="red">NO.1</span>
        </a>

      </div>
    </div>

    <div>
      <ul class="subnav clearfix">
        <li class="cur" ><a href="#!">车系首页</a>
        </li>
        <li><a href="#!">参数配置</a>
        </li>
        <li ><a href="#!">图片</a>
        </li>
        <li><a href="#!">报价</a>
        </li>
        <li ><a href="#!">口碑</a>
        </li>
        <li><a href="#!">文章</a>
        </li>
        <li><a href="#!">视频</a>
        </li>
        <li ><a href="#!">养车报告</a>
        </li>
        <li><a href="#!">二手车</a>
        </li>
        <li><a href="#!">论坛</a>
        </li>
      </ul>
    </div>

    <div class="pt-30"></div>

    <el-row :gutter="5">
      <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
        <div class="motorcycle-img">
          <img src="https://img.huxiucdn.com/article/cover/201801/26/125109549946.jpg?imageView2/1/w/275/h/206/|imageMogr2/strip/interlace/1/quality/85/format/jpg" alt="" width="100%" height="100%">
          <a class="tips">实拍图片4465张 >></a>
        </div>
      </el-col>

      <el-col :xs="10" :sm="10" :md="10" :lg="10" :xl="10">
        <div class="price">
          <div class="local-price">新车指导价：<span>17.98-25.98万</span></div>
          <div class="factory-price">车商城报价：<span >17.98-32.98万</span></div>
          <div class="used-price">二手车价格：<span >17.98-32.98万</span></div>
        </div>
        <div class="info">
          <div class="inner">
            <span class="note">降价优惠</span>
            <h5 class="desc grey-txt">暂无</h5>
            <el-button type="danger">危险按钮</el-button>
          </div>

          <div class="inner">
            <span class="note">贷款</span>
            <h5 class="desc grey-txt">暂无</h5>
            <el-button type="primary">主要按钮</el-button>
          </div>

          <div class="inner">
            <span class="note">二手车</span>
            <h5 class="desc grey-txt">暂无</h5>
            <el-button type="primary">主要按钮</el-button>
          </div>
        </div>

      </el-col>

      <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
        <div class="rate-title" style="padding-bottom: 20px">用户评价</div>
        <el-rate
          v-model="value"
          disabled
          show-score
          text-color="#ff9900"
          score-template="4.5分">
        </el-rate>

        <div class="rate">

          <el-row>
            <el-col :xs="9" :sm="9" :md="9" :lg="9" :xl="9">
              <span class="rate-name">性价比</span>
            </el-col>
            <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
              <span class="rate-score">4.33分</span>
            </el-col>
            <el-col :xs="7" :sm="7" :md="7" :lg="7" :xl="7">
              <span class="rate-rank">第1名</span>
            </el-col>
          </el-row>

          <el-row>
            <el-col :xs="9" :sm="9" :md="9" :lg="9" :xl="9">
              <span class="rate-name">外观</span>
            </el-col>
            <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
              <span class="rate-score">4.33分</span>
            </el-col>
            <el-col :xs="7" :sm="7" :md="7" :lg="7" :xl="7">
              <span class="rate-rank">第1名</span>
            </el-col>
          </el-row>


          <el-row>
            <el-col :xs="9" :sm="9" :md="9" :lg="9" :xl="9">
              <span class="rate-name">动力</span>
            </el-col>
            <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
              <span class="rate-score">4.33分</span>
            </el-col>
            <el-col :xs="7" :sm="7" :md="7" :lg="7" :xl="7">
              <span class="rate-rank">第1名</span>
            </el-col>
          </el-row>


          <el-row>
            <el-col :xs="9" :sm="9" :md="9" :lg="9" :xl="9">
              <span class="rate-name">油耗</span>
            </el-col>
            <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
              <span class="rate-score">4.33分</span>
            </el-col>
            <el-col :xs="7" :sm="7" :md="7" :lg="7" :xl="7">
              <span class="rate-rank">第1名</span>
            </el-col>
          </el-row>


          <el-row>
            <el-col :xs="9" :sm="9" :md="9" :lg="9" :xl="9">
              <span class="rate-name">保养</span>
            </el-col>
            <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
              <span class="rate-score">4.33分</span>
            </el-col>
            <el-col :xs="7" :sm="7" :md="7" :lg="7" :xl="7">
              <span class="rate-rank">第1名</span>
            </el-col>
          </el-row>

          <el-row>
            <el-col :xs="9" :sm="9" :md="9" :lg="9" :xl="9">
              <span class="rate-name">操控</span>
            </el-col>
            <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
              <span class="rate-score">4.33分</span>
            </el-col>
            <el-col :xs="7" :sm="7" :md="7" :lg="7" :xl="7">
              <span class="rate-rank">第1名</span>
            </el-col>
          </el-row>

        </div>
      </el-col>
    </el-row>

    <el-row :gutter="5">
      <el-col :xs="18" :sm="18" :md="18" :lg="18" :xl="18">
        <div class="sub-title">
          迈腾动态
        </div>
        <div class="clearfix">
          <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
            <div class="list-detail">
              <div class="list clearfix"><div class="list-tag">视频 |</div><div class="list-title">哈弗H6通过减速带</div> <div class="list-date">01-22</div></div>
              <div class="list clearfix"><div class="list-tag">视频 |</div><div class="list-title">哈弗H6通过减速带</div> <div class="list-date">01-22</div></div>
              <div class="list clearfix"><div class="list-tag">视频 |</div><div class="list-title">哈弗H6通过减速带</div> <div class="list-date">01-22</div></div>
              <div class="list clearfix"><div class="list-tag">视频 |</div><div class="list-title">哈弗H6通过减速带</div> <div class="list-date">01-22</div></div>
              <div class="list clearfix"><div class="list-tag">视频 |</div><div class="list-title">哈弗H6通过减速带</div> <div class="list-date">01-22</div></div>
              <div class="list clearfix"><div class="list-tag">视频 |</div><div class="list-title">哈弗H6通过减速带</div> <div class="list-date">01-22</div></div>
            </div>
          </el-col>
          <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
            <div class="list-detail">
              <div class="list clearfix"><div class="list-tag">视频 |</div><div class="list-title">哈弗H6通过减速带</div> <div class="list-date">01-22</div></div>
              <div class="list clearfix"><div class="list-tag">视频 |</div><div class="list-title">哈弗H6通过减速带</div> <div class="list-date">01-22</div></div>
              <div class="list clearfix"><div class="list-tag">视频 |</div><div class="list-title">哈弗H6通过减速带</div> <div class="list-date">01-22</div></div>
              <div class="list clearfix"><div class="list-tag">视频 |</div><div class="list-title">哈弗H6通过减速带</div> <div class="list-date">01-22</div></div>
              <div class="list clearfix"><div class="list-tag">视频 |</div><div class="list-title">哈弗H6通过减速带</div> <div class="list-date">01-22</div></div>
              <div class="list clearfix"><div class="list-tag">视频 |</div><div class="list-title">哈弗H6通过减速带</div> <div class="list-date">01-22</div></div>
            </div>
          </el-col>
        </div>


        <div class="sub-title">迈腾车款</div>
        <div>
          <table class="table">
            <thead>
            <tr>
              <td>名称</td>
              <td>排量</td>
              <td>关注度</td>
              <td>指导价</td>
            </tr>
            </thead>

            <tbody>
            <tr>
              <td>Mark</td>
              <td>Otto</td>
              <td><el-progress :percentage="50" status="exception"></el-progress></td>
              <td>@mdo</td>
            </tr>
            <tr>
              <td>Jacob</td>
              <td>Thornton</td>
              <td><el-progress :percentage="50" status="exception"></el-progress></td>
              <td>@mdo</td>
            </tr>
            <tr>
              <td>Larry</td>
              <td>the Bird</td>
              <td><el-progress :percentage="50" status="exception"></el-progress></td>
              <td>@mdo</td>
            </tr>
            </tbody>

          </table>
        </div>
      </el-col>

      <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
        一只小小鸟
      </el-col>

    </el-row>
  </div>
</template>


<script>
  export default {
    layout: 'default',
    head: {
      title: '车系页',
      meta: [
        { charset: 'utf-8' },
        { name: 'description', content: '这是一个很屌的网站' },
        { name: 'viewport', content: 'width=device-width, initial-scale=1' }
      ],
      link: [
        { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
        { rel: 'stylesheet', href: '/common.css' },
        { rel: 'stylesheet', href: '/build.css' },
        { rel: 'stylesheet', href: '/index.css' },

      ]
    },
    data() {
      return{
        value:4.5
      }
    }
  }



</script>

<style>
  .table {
    width: 100%;
    max-width: 100%;
    margin-bottom: 1rem;
    background-color: transparent;
  }
  .table td {
    padding: 0.75rem;
    vertical-align: top;
    border-bottom: 1px solid #dee2e6;
  }
  .el-progress-bar{
    padding-right: 0;
  }
  .list-date{
    font-size: 18px;
    line-height: 18px;
    padding-right: 30px;
    display: inline-block;
    float: right;
  }

  .list-title{
    padding-left: 20px;
    line-height: 18px;
    text-align: center;
    font-size: 18px;
    display: inline-block;
  }

  .list-tag{
    font-size: 18px;
    line-height: 18px;
    color: green;
    display: inline-block;
    float: left;
  }


  .list{
    margin-top: 10px;
    margin-bottom: 10px;
  }


  .sub-title{
    padding-top: 30px;
    font-size: 18px;
    padding-bottom: 10px;
    border-bottom: 1px solid #f0f0f0;
  }

  .breadcrumb{
    margin-top: 20px;
  }

  .tt_h1 {
    height: 60px;
    display: block;
  }
  .tt_h1 .ico {
    width: 40px;
    height: 30px;
    display: inline;
    float: left;
    overflow: hidden;
    margin: 15px 9px 0 0;
  }

  .tt_h1 .lt_f1,
  .tt_h1 h1 {
    display: inline;
    float: left;
    font: bold 24px/30px 'Microsoft YaHei';
    color: #444;
    margin-top: 15px;
  }

  .tt_h1 .ranking {
    display: inline;
    float: right;
    font: 14px/22px 'Microsoft YaHei';
    color: #444;
    margin-top: 16px;
  }
  .tt_h1 .ranking:hover {
    text-decoration: none;
  }
  .tt_h1 .ranking .red {
    font-size: 20px;
    color: #db2e2e;
    padding-left: 5px;
  }



  /*=============*/

  .subnav {
    padding-left: 0;
  }
  .subnav li {
    width: 114px;
    display: inline;
    float: left;
    overflow: hidden;
    text-align: center;
  }

  .subnav li a {
    background-color: #409EFF;
    border: 1px solid #2c96f7;
    border-right: 0;
    display: block;
    font: 14px/38px 'Microsoft YaHei';
    color: #FFF;
  }
  .subnav li a:hover {
    text-decoration: none;
    color: #FFF;
    background-color: #2b80b9;
    border: 1px solid #3183ba;
    border-right: 0;
    transition: all linear .4s;
    -webkit-transition: all linear .4s;
  }


  .cur{
   border-bottom: 2px solid #ff9400;
  }

  .local-price span{font:30px  'Microsoft YaHei';color:#e74b3c;margin-right:5px}
  .factory-price{
    padding-top: 18px;
  }
  .factory-price span{
    padding-left: 3px;
    font-size: 24px;
  }
  .info{
    background-color: #F7F7F7;
    margin-top: 25px;
  }
  .inner{
    padding: 29px;
    display: inline-block;
  }
  .desc{
    margin-top: 8px;
    margin-bottom: 13px;
    font-size: 18px;
   color: #999!important;
  }
  .used-price{
    padding-top: 18px;
  }
  .used-price span{
    padding-left: 3px;
    font-size: 24px;
  }

  .price{
    padding-left: 29px;
  }

  .rate{
    padding-top: 15px;
    font-size: 16px;
  }

  .rate-title{
    font-size: 20px;
  }

  .rate-name{
    display: block;
    padding-top: 20px;
    color: green;
  }
  .rate-score{
    display: block;
    padding-top: 20px;
  }
  .rate-rank{
    display: block;
    padding-top: 20px;
    color: red;
  }
  .motorcycle-img{
    position: relative;
    height: 315px;
  }
  .tips{
    background-color: #409EFF;
    position: absolute;
    bottom: 7px;
    right: 5px;
    color: #FFF;
  }



</style>
